<script setup lang="ts">
import {movieDB} from '@/data/lowdb.ts'
import {errorImg, errorImg1, videoImagesDir} from '@/utils/config.ts'
import {getMovieIdObj, gotoDreamVideo} from '@/utils/utils.ts'

import {Movie} from '@/data/Dream'


defineProps<{
  movie: Movie
}>()

const containerWidth = 397
const bigImageHeight = Math.ceil(containerWidth * 9 / 16)
const smallImageWidth = (containerWidth - 3) / 2
const smallImageHeight = Math.ceil(smallImageWidth * 9 / 16)

// 把电影其它图片交换到电影封面
function switchToCover(movie: Movie, index: number) {
  // console.log(movie, index)
  const tmpCover = movie.images[0]
  movie.images[0] = movie.images[index]
  movie.images[index] = tmpCover

  const movieIndex = movieDB.read().findIndex(getMovieIdObj(movie)).value()
  movieDB.read()
      .set(`${movieIndex}`, movie)
      .write()
}

function getImageSrc(img: string, isCover = false) {
  if (img) {
    return videoImagesDir + img
  }
  return isCover ? errorImg : errorImg1
}
</script>

<template>
  <a-image-preview-group>
    <div class="movie-cover"
         @contextmenu.prevent="gotoDreamVideo(movie)">
      <a-image :width="containerWidth"
               :height="bigImageHeight"
               :src="getImageSrc(movie.images[0], true)"/>
    </div>
    <div class="movie-images">
      <div @contextmenu.prevent="switchToCover(movie, index+1)"
           v-for="(img, index) in movie.images.slice(1)" :key="img">
        <a-image :width="smallImageWidth"
                 :height="smallImageHeight"
                 :src="getImageSrc(img)"/>
      </div>
    </div>
  </a-image-preview-group>
</template>

<style scoped lang="stylus">
.movie-cover
  margin-bottom: 3px;

.movie-images
  display: flex;
  justify-content: space-between;
</style>